
<!-- 
  复制自 运营平台
  差异： 1. 删除商户搜索框，  2. show函数删除mchNo参数， 3.rules删除  mchNo参数
  -->
<template>
  <a-drawer
    v-model:visible="vdata.isShow" 
    :title=" vdata.isAdd ? '新增门店' : '修改门店' "
    width="60%"
    :mask-closable="false"
    @close="vdata.isShow = false"
  >
    <a-form ref="infoFormModel" :model="vdata.saveObject" :label-col="{span: 6}" :wrapper-col="{span: 15}" :rules="rules">
      <a-row justify="space-between" type="flex">
        <a-col :span="12">
          <a-form-item label="门店名称:" name="storeName">
            <a-input v-model:value="vdata.saveObject.storeName" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="联系人电话" name="contactPhone">
            <a-input v-model:value="vdata.saveObject.contactPhone" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="门店LOGO" name="storeLogo">
            <JeepayUpload v-model:src="vdata.saveObject.storeLogo" bizType="applyment" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="门头照" name="storeOuterImg">
            <JeepayUpload v-model:src="vdata.saveObject.storeOuterImg" bizType="applyment" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="门店内景照" name="storeInnerImg">
            <JeepayUpload v-model:src="vdata.saveObject.storeInnerImg" bizType="applyment" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="备注：" name="remark">
            <a-input v-model:value="vdata.saveObject.remark" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-divider />

      <!-- 引入地图组件  -->
      <JeepayAmap v-if="vdata.isShow" ref="jeepayAmapRef" />
    </a-form>
    
    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" @click="vdata.isShow = false"><close-outlined /> 取消</a-button>
      <a-button type="primary" :loading="vdata.confirmLoading" @click="handleOkFunc"><check-outlined /> 保存</a-button>
    </div>
  </a-drawer>
</template>
<script lang="ts" setup>
import { req, API_URL_MCH_STORE_LIST }from '@/api/manage'
import { reactive, ref, getCurrentInstance, nextTick } from 'vue'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const jeepayAmapRef = ref()
const infoFormModel = ref()

const props = defineProps({
    callbackFunc: {type: Function, default: () => {} }
})

const vdata = reactive({
  confirmLoading: false, // 显示确定按钮loading图标
  isAdd: true, // 新增 or 修改页面标识
  isShow: false, // 是否显示弹层/抽屉
  saveObject: {} as any, // 数据对象
  recordId: null, // 更新对象ID
})

const rules = {
  areaCode: [{ required: true, message: '请选择省市区', trigger: 'blur' }],
  storeName: [{ required: true, message: '请输入门店名称', trigger: 'blur' }]
}


function show (recordId) { // 弹层打开事件

  if (infoFormModel.value !== undefined) {
    infoFormModel.value.resetFields()
  }

  vdata.isAdd = !recordId

  // 数据恢复为默认数据
  vdata.saveObject = { lng: '', lat: ''}

  vdata.confirmLoading = false // 关闭loading

  let initMapData : any = {}

  if (!vdata.isAdd) { // 修改信息 延迟展示弹层
    vdata.recordId = recordId
    req.getById(API_URL_MCH_STORE_LIST, recordId).then(res => {
      vdata.saveObject = res

      vdata.isShow = true

      // 门店包含了区域编码
      if(res.areaCode && res.areaCode.length){
        initMapData.areacode = res.areaCode
        initMapData.lnglat = res.lng + ',' + res.lat
        initMapData.address = res.address
      }
      // 显示地图信息
      nextTick(() => jeepayAmapRef.value.init(initMapData))
    })

  } else {

    vdata.isShow = true // 立马展示弹层信息

    // 显示地图信息
    nextTick(() => jeepayAmapRef.value.init(initMapData))

  }
}

// 设置地图标点
function handleOkFunc () { // 点击【确认】按钮事件


  let mapData = jeepayAmapRef.value.getMapData()
  if(!mapData || mapData.areacode.length == 0 || !mapData.address || !mapData.lnglat){
    return $infoBox.message.error('请选择地理位置')
  }

  if(mapData.lnglat.indexOf(',') < 0){
    return $infoBox.message.error('请输入正确的经纬度')
  }


  infoFormModel.value.validate().then(valid =>{

    vdata.confirmLoading = true // 显示loading

    vdata.saveObject.lng = mapData.lnglat.split(',')[0]
    vdata.saveObject.lat = mapData.lnglat.split(',')[1]
    vdata.saveObject.address = mapData.address
    vdata.saveObject.areaCode = JSON.stringify(mapData.areacode)

    // 请求HTTP 
    req.addOrUpdate(vdata.isAdd ? null: vdata.recordId, API_URL_MCH_STORE_LIST, vdata.saveObject).then(res => {
        vdata.isShow = false
        vdata.confirmLoading = false
        props.callbackFunc() // 刷新列表
    }).catch(valid =>{
        vdata.confirmLoading = false
    })
  })
}

defineExpose({show})
</script>
